﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryOverlayStudy._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tools.min.js" type="text/javascript"></script>
    <link href="CSS/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <!-- 定义一个按钮作为触发器. 这里通过rel属性，指定遮罩层元素的id -->
    <button type="button" rel="#overlay">
        Open overlay</button>
    <!-- 遮罩元素，你可以通过样式表定义样式 -->
    <!-- 遮罩元素可以使任何html元素，一般我们用div，注意id的设定 -->
    <div class="overlay" id="overlay">
        <!--这里是遮罩层里面要放的东西 -->
        <h2 style="margin: 10px 0">
            Here is my overlay</h2>
        <p style="float: left; margin: 0px 20px 0 0;">
            
        </p>
        <p>
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
            himenaeos. Donec lorem ligula, elementum vitae, imperdiet a, posuere nec, ante.
            Quisque mattis massa id metus.
        </p>
    </div>
    <script type="text/javascript">
        $(function () {
            //为页面中所有拥有rel属性的button元素绑定overlay效果
            $("button").overlay();
        });
    </script>
    </form>
</body>
</html>
